<template>
  
  <div id="InquiryStatistics">
    <div class="banner">
      <p>
        <span>首页</span>
        <span> / </span>
        <span>数据统计</span>
        <span> / </span>
        <span class="title">用户统计</span>
      </p><br>
      <p class="header">问诊统计</p>
    </div>

    <div class="bx">
      <div class="DepartmentIncome">
        <h3>各科室的销售收入</h3>
        <div class="button">
          <span v-for="(item,index) in timedate" :key="index" @click="change(index)" :class="currentIndex === index ? 'active':''" >{{item}}</span>
        </div>
        <div id="dincome" ref="dincome"></div>
        <div class="demo-date-picker">
          <div class="block">
              <el-date-picker
                v-model="value1"
                type="daterange"
                range-separator="To"
                start-placeholder="Start date"
                end-placeholder="End date"
                :size="size"
              />
            </div>
        </div>
      </div>

      <div class="diseaseIncome">
        <h3>各疾病的销售收入</h3>
        <div id="diseaseIncome" ref="diseaseIncome"></div>
      </div>


    </div>

  </div>
</template>

<script setup>
import * as echarts from 'echarts';
import { reactive, ref } from "@vue/reactivity";
import { onMounted } from 'vue';
import axios from "axios";

var timedate=ref(["本月","本季度","本年"])
var currentIndex=ref(0);
var inquriy=reactive({})
const value1 = ref('')


onMounted(()=>{
  axios.get('/api/inquiry/list').then((res)=>{
    inquriy=res.data.list;
    dIncome();
    diseaseIncome();
  })
})

function dIncome () {
	let newPromise = new Promise((resolve) => {
		resolve()
	})
	newPromise.then(() => {
    if (incomeChart != null && incomeChart != "" && incomeChart != undefined) {
      console.log(123);
      echarts.dispose();//销毁
    }else{
      if(currentIndex.value==0){
      echarts.init(document.getElementById('dincome')).dispose();
      var incomeChart=echarts.init(document.getElementById('dincome'));
      var option;
      const labelOption = {
        show: true,
        fontSize: 12,
        rich: {
          name: {}
        }
      };
      option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          data: ['图文问诊', '电话问诊']
        },
        toolbox: {
          show: true,
          orient: 'vertical',
          left: 'right',
          top: 'center',
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ['line', 'bar', 'stack'] },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        xAxis: [
          {
            type: 'category',
            axisTick: { show: false },
            data: ['皮肤科', '妇产科', '男科', '儿科', '中医科','内科','外科','眼科','口腔科','骨科','传染科','体检科',]
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '图文问诊',
            type: 'bar',
            barGap: 0,
            label: labelOption,
            emphasis: {
              focus: 'series'
            },
            data: [inquriy[0]['皮肤科'],inquriy[0]['妇产科'],inquriy[0]['男科'],inquriy[0]['儿科'],inquriy[0]['中医科'],inquriy[0]['内科'],inquriy[0]['外科'],inquriy[0]['眼科'],inquriy[0]['口腔科'],inquriy[0]['骨科'],inquriy[0]['传染科'],inquriy[0]['体检科'],]
          },
          {
            name: '电话问诊',
            type: 'bar',
            label: labelOption,
            emphasis: {
              focus: 'series'
            },
            data: [inquriy[3]['皮肤科'],inquriy[3]['妇产科'],inquriy[3]['男科'],inquriy[3]['儿科'],inquriy[3]['中医科'],inquriy[3]['内科'],inquriy[3]['外科'],inquriy[3]['眼科'],inquriy[3]['口腔科'],inquriy[3]['骨科'],inquriy[3]['传染科'],inquriy[3]['体检科'],]
          }
        ]
      };

      option && incomeChart.setOption(option);
      }else if(currentIndex.value==1){
        echarts.init(document.getElementById('dincome')).dispose();
      var incomeChart=echarts.init(document.getElementById('dincome'));
      var option;
      const labelOption = {
        show: true,
        fontSize: 12,
        rich: {
          name: {}
        }
      };
      option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          data: ['图文问诊', '电话问诊']
        },
        toolbox: {
          show: true,
          orient: 'vertical',
          left: 'right',
          top: 'center',
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ['line', 'bar', 'stack'] },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        xAxis: [
          {
            type: 'category',
            axisTick: { show: false },
            data: ['皮肤科', '妇产科', '男科', '儿科', '中医科','内科','外科','眼科','口腔科','骨科','传染科','体检科',]
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '图文问诊',
            type: 'bar',
            barGap: 0,
            label: labelOption,
            emphasis: {
              focus: 'series'
            },
            data: [inquriy[2]['皮肤科'],inquriy[2]['妇产科'],inquriy[2]['男科'],inquriy[2]['儿科'],inquriy[2]['中医科'],inquriy[2]['内科'],inquriy[2]['外科'],inquriy[2]['眼科'],inquriy[2]['口腔科'],inquriy[2]['骨科'],inquriy[2]['传染科'],inquriy[2]['体检科'],]
          },
          {
            name: '电话问诊',
            type: 'bar',
            label: labelOption,
            emphasis: {
              focus: 'series'
            },
            data: [inquriy[5]['皮肤科'],inquriy[5]['妇产科'],inquriy[5]['男科'],inquriy[5]['儿科'],inquriy[5]['中医科'],inquriy[5]['内科'],inquriy[5]['外科'],inquriy[5]['眼科'],inquriy[5]['口腔科'],inquriy[5]['骨科'],inquriy[5]['传染科'],inquriy[5]['体检科'],]
          }
        ]
      };

      option && incomeChart.setOption(option);
      }else{
        echarts.init(document.getElementById('dincome')).dispose();
      var incomeChart=echarts.init(document.getElementById('dincome'));
      var option;
      const labelOption = {
        show: true,
        fontSize: 12,
        rich: {
          name: {}
        }
      };
      option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          data: ['图文问诊', '电话问诊']
        },
        toolbox: {
          show: true,
          orient: 'vertical',
          left: 'right',
          top: 'center',
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ['line', 'bar', 'stack'] },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        xAxis: [
          {
            type: 'category',
            axisTick: { show: false },
            data: ['皮肤科', '妇产科', '男科', '儿科', '中医科','内科','外科','眼科','口腔科','骨科','传染科','体检科',]
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '图文问诊',
            type: 'bar',
            barGap: 0,
            label: labelOption,
            emphasis: {
              focus: 'series'
            },
            data: [inquriy[1]['皮肤科'],inquriy[1]['妇产科'],inquriy[1]['男科'],inquriy[1]['儿科'],inquriy[1]['中医科'],inquriy[1]['内科'],inquriy[1]['外科'],inquriy[1]['眼科'],inquriy[1]['口腔科'],inquriy[1]['骨科'],inquriy[1]['传染科'],inquriy[1]['体检科'],]
          },
          {
            name: '电话问诊',
            type: 'bar',
            label: labelOption,
            emphasis: {
              focus: 'series'
            },
            data: [inquriy[4]['皮肤科'],inquriy[4]['妇产科'],inquriy[4]['男科'],inquriy[4]['儿科'],inquriy[4]['中医科'],inquriy[4]['内科'],inquriy[4]['外科'],inquriy[4]['眼科'],inquriy[4]['口腔科'],inquriy[4]['骨科'],inquriy[4]['传染科'],inquriy[4]['体检科'],]
          }
        ]
      };

      option && incomeChart.setOption(option);


      }
    }
  })
}
function diseaseIncome(){
  let newPromise = new Promise((resolve) => {
		resolve()
	})
  newPromise.then(()=>{
    var incomeChart=echarts.init(document.getElementById('diseaseIncome'));
      incomeChart.setOption({
        tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  legend: {},
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'value'
  },
  yAxis: {
    type: 'category',
    data: ['白癜风', '皮肤瘙痒', '湿疹', '荨麻疹', '色素痣', '心血管', '高血压']
  },
  series: [
    {
      name: '电话问诊',
      type: 'bar',
      stack: 'total',
      label: {
        show: true
      },
      emphasis: {
        focus: 'series'
      },
      data: [150, 212, 201, 154, 190, 330, 410]
    },
    {
      name: '图文问诊',
      type: 'bar',
      stack: 'total',
      label: {
        show: true
      },
      emphasis: {
        focus: 'series'
      },
      data: [820, 832, 901, 934, 1290, 1330, 1320]
    }
  ]
      })
  })
}


var change=(index)=>{
  currentIndex.value=index;
  dIncome()
}
</script>

<style scoped>
h3{
  margin: 10px 20px;
}
.banner{
  height: 80px;
  width: 100%;
  background-color: #fff;
  margin-bottom: 40px;
  position: absolute;
  top:61px;
  left: 15%;
  padding-top: 20px;
  z-index: 999;
}
.banner p{
  font-size: 12px;
  color: #AAA;
}
.banner .title{
  color: #000;
}
.banner .header{
  font-size: 18px;
  font-weight: 600;
  color: #000;
}
#InquiryStatistics .bx{
  width: 800px;
  /* height: 500px; */
  margin: auto;
  margin-top: 120px;
  /* background: #fff; */
  overflow: hidden;
}
#InquiryStatistics .bx .button{
  margin: 20px 0 0 20px;
  border-radius: 5px;
  border: 1px solid blue;
  width: 280px;
  display: flex;
  justify-content: space-between;
  text-align: center;

}
#InquiryStatistics .bx .button span{
  font-size: 12px;
  display: inline-block;
  width: 100px;
  height: 25px;
  line-height:25px;
  color: blue;
  cursor: pointer;
  /* border: 1px solid blue; */
}
#InquiryStatistics .bx .DepartmentIncome{
  margin-bottom: 40px;
  background: white;
  overflow: hidden;
  position: relative;
}
#InquiryStatistics .bx .DepartmentIncome .button span.active{
  background: blue;
  color: white;
}
#InquiryStatistics .bx .DepartmentIncome #dincome{
  margin-top: 20px;
  width: 100%;
  height: 350px;
}
#InquiryStatistics .bx .diseaseIncome{
  margin-bottom: 40px;
  background: white;
  overflow: hidden;
}
#InquiryStatistics .bx .diseaseIncome #diseaseIncome{
  width: 100%;
  height: 350px;
}
.demo-date-picker {
  display: flex;
  width: 50%;
  padding: 0;
  flex-wrap: wrap;
  position: absolute;
  top:5% ; 
  right: 0%;
}
.demo-date-picker .block {
  padding: 30px 0;
  text-align: center;
  border-right: solid 1px var(--el-border-color);
  flex: 1;
}
.demo-date-picker .block:last-child {
  border-right: none;
}
</style>